<template>
  <div>

    <SkyCardPanel title="树形左右计算汇总">
      <div slot="main">

        <!-- 树形表格 -->
        <SkyTreeTable ref="SkyOrSoTree" defaultexpend showcheckbox v-slot="row" :outsideList="SummaryList">
          <SkyTreeColumn :row="row.scope" label="合约规划名称" prop="name" width="250" ladder showIcon></SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="规划金额(含税)" prop="planAmountTax" width="200">
            <div v-if="row.scope.parentId">
              <SkyInput v-model="row.scope.planAmountTax" align="right" @change="planAmountTaxInput(row.scope,'planAmountTax')" placeholder="请输入内容" v-thousands.planAmountTax="row.scope" ></SkyInput>
            </div>
            <div v-else>
              <SkyInput disabled :value="MonneyAll(row.scope,'planAmountTax')" align="right" placeholder="请输入内容"></SkyInput>
            </div>
          </SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="规划金额(不含税)" prop="planAmount">
            <div v-if="row.scope.parentId">
              <SkyInput v-model="row.scope.planAmount" @change="planAmountInput(row.scope,'planAmount')" align="right" placeholder="请输入内容" v-thousands.planAmount="row.scope"></SkyInput>
            </div>
            <div v-else>
              <SkyInput disabled :value="MonneyAll(row.scope,'planAmount')" align="right" placeholder="请输入内容"></SkyInput>
            </div>
          </SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="税率" align="right" prop="taxRateId">
            <div v-if="row.scope.parentId">
              {{row.scope["taxRateId"] | taxRateExchange}}
            </div>
            <div v-else></div>
          </SkyTreeColumn>
        </SkyTreeTable>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
            &lt;!-- 树形表格 --&gt;
            &lt;SkyTreeTable ref="SkyOrSoTree" defaultexpend showcheckbox v-slot="row" :outsideList="SummaryList"&gt;
              &lt;SkyTreeColumn :row="row.scope" label="合约规划名称" prop="name" width="250" ladder showIcon&gt;&lt;/SkyTreeColumn&gt;
              &lt;SkyTreeColumn :row="row.scope" label="规划金额(含税)" prop="planAmountTax" width="200"&gt;
                &lt;div v-if="row.scope.parentId"&gt;
                  &lt;SkyInput v-model="row.scope.planAmountTax" @input="planAmountTaxInput(row.scope,'planAmountTax')" placeholder="请输入内容"  v-thousands.planAmountTax="row.scope" &gt;&lt;/SkyInput&gt;
                &lt;/div&gt;
                &lt;div v-else&gt;
                  &lt;SkyInput disabled :value="MonneyAll(row.scope,'planAmountTax')" placeholder="请输入内容"&gt;&lt;/SkyInput&gt;
                &lt;/div&gt;
              &lt;/SkyTreeColumn&gt;
              &lt;SkyTreeColumn :row="row.scope" label="规划金额(不含税)" prop="planAmount"&gt;
                &lt;div v-if="row.scope.parentId"&gt;
                  &lt;SkyInput v-model="row.scope.planAmount" @input="planAmountInput(row.scope,'planAmount')" placeholder="请输入内容"  v-thousands.planAmount="row.scope"&gt;&lt;/SkyInput&gt;
                &lt;/div&gt;
                &lt;div v-else&gt;
                  &lt;SkyInput disabled :value="MonneyAll(row.scope,'planAmount')" placeholder="请输入内容"&gt;&lt;/SkyInput&gt;
                &lt;/div&gt;
              &lt;/SkyTreeColumn&gt;
              &lt;SkyTreeColumn :row="row.scope" label="税率" prop="taxRateId"&gt;
                &lt;div v-if="row.scope.parentId"&gt;
                  row.scope["taxRateId"] | taxRateExchange  //此处用双括号包裹
                &lt;/div&gt;
                &lt;div v-else&gt;&lt;/div&gt;
              &lt;/SkyTreeColumn&gt;
            &lt;/SkyTreeTable&gt;
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {
                  SummaryList: [],
                }
              },
              methods: {
                /**汇总金额 */
                MonneyAll (row, name) {
                  if (!row[name]) {
                    return 0
                  }
                  let toThousandDecimalFilter = this.$options.filters[
                    "toThousandDecimalFilter"
                  ];
                  let removeThousandDecimalFilter = this.$options.filters[
                    "removeThousandDecimalFilter"
                  ];
                  let value = 0
                  if (row.sons.length == 0) {
                    value = 0
                  } else {
                    row.sons.map(item => {
                      let node = this.$refs.SkyOrSoTree.getAppointNode(item)
                      value += parseFloat(node[name]) || 0
                    })
                  }
                  row[name] = removeThousandDecimalFilter(value)
                  return toThousandDecimalFilter(value)
                },
                /**规划金额（含税） */
                planAmountTaxInput (row, name) {
                  row['planAmount'] = row[name] * (1 - row['taxRateId'])
                },
                /**规划金额（不含税） */
                planAmountInput (row, name) {
                  row['planAmountTax'] = row[name] / (1 - row['taxRateId'])
                },
              },
              mounted () {
                let fixedHeaderList = [
                  {
                    id: 10,
                    parentId: 0,
                    name: '保利项目一期',
                    planAmountTax: 2000000,
                    planAmount: 1800000,
                    taxRateId: 0.1,
                  },
                  {
                    id: 1010,
                    parentId: 10,
                    name: '土地契税',
                    planAmountTax: 2000000,
                    planAmount: 1800000,
                    taxRateId: 0.1,
                  },
                  {
                    id: 1011,
                    parentId: 10,
                    name: '拆迁补偿费',
                    planAmountTax: 2000000,
                    planAmount: 1800000,
                    taxRateId: 0.1,
                  }
                ]
                this.fixedHeaderList = fixedHeaderList
              }
            }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
export default {
  data () {
    return {
      SummaryList: [],
    }
  },
  methods: {
    /**汇总金额 */
    MonneyAll (row, name) {
      if (!row[name]) {
        return 0
      }
      let toThousandDecimalFilter = this.$options.filters[
        "toThousandDecimalFilter"
      ];
      let removeThousandDecimalFilter = this.$options.filters[
        "removeThousandDecimalFilter"
      ];
      let value = 0
      if (row.sons.length == 0) {
        value = 0
      } else {
        row.sons.map(item => {
          let node = this.$refs.SkyOrSoTree.getAppointNode(item)
          value += parseFloat(node[name]) || 0
        })
      }
      row[name] = removeThousandDecimalFilter(value)
      return toThousandDecimalFilter(value)
    },
    /**规划金额（含税） */
    planAmountTaxInput (row, name) {
      row['planAmount'] = row[name] * (1 - row['taxRateId'])
    },
    /**规划金额（不含税） */
    planAmountInput (row, name) {
      row['planAmountTax'] = row[name] / (1 - row['taxRateId'])
    },
  },
  filters: {
    taxRateExchange (value) {
      return value * 100 + '%'
    }
  },
  mounted () {
    this.SummaryList = [
      {
        id: 10,
        parentId: 0,
        name: '保利项目一期',
        planAmountTax: 2000000,
        planAmount: 1800000,
        taxRateId: 0.1,
      },
      {
        id: 1010,
        parentId: 10,
        name: '土地契税',
        planAmountTax: 2000000,
        planAmount: 1800000,
        taxRateId: 0.1,
      },
      {
        id: 1011,
        parentId: 10,
        name: '拆迁补偿费',
        planAmountTax: 2000000,
        planAmount: 1800000,
        taxRateId: 0.1,
      }
    ]
  }
}

</script>

<style lang="scss">
</style>